<template>
  <div class="user">
    <!-- 头部 -->
    <div class="user_top">
      <!-- 头像 -->
      <img v-if="!islogined" src="../assets/img/user.jpeg" alt="" />
      <img v-else src="../assets/img/usertop.jpg" alt="" />
      <!-- 显示登录用户 -->
      <h3 v-show="islogined">{{ username }}</h3>
      <h3 v-show="!islogined" @click="login">点击登录</h3>
      <van-icon :name="!islogined ? 'arrow' : 'cross'" @click="login" />
    </div>

    <!-- 模态框 -->
    <van-overlay v-show="show">
      <div class="wrapper" @click.stop>
        <van-form @submit="onSubmit" class="block">
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button
              round
              block
              native-type="submit"
              style="background-color: red; color: white"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </van-overlay>

    <!-- 选项 -->
    <van-grid :column-num="3">
      <van-grid-item icon="label-o" text="我的订单" />
      <van-grid-item icon="balance-list-o" text="优惠卷" />
      <van-grid-item icon="goods-collect-o" text="礼品卡" />
      <van-grid-item icon="point-gift-o" text="我的收藏" />
      <van-grid-item icon="flag-o" text="我的足迹" />
      <van-grid-item icon="user-o" text="会员福利" />
      <van-grid-item icon="location-o" text="地址管理" />
      <van-grid-item icon="shield-o" text="账号安全" />
      <van-grid-item icon="phone-o" text="联系客服" />
      <van-grid-item icon="question-o" text="帮助中心" />
      <van-grid-item icon="smile-comment-o" text="意见反馈" />
    </van-grid>
  </div>
</template>
<script>
// 引入登录接口
import { postuser } from "@/utils/https";
export default {
  name: "User",
  data() {
    return {
      islogined: false, //登录状态
      username: "", //登录用户名
      password: "", //密码
      show: false, //模态框显示
      // headimg: "../assets/img/usertop.jpg",
    };
  },
  computed: {},
  components: {},
  methods: {
    onSubmit(value) {
      console.log(value); 
      postuser({
        username: value["用户名"],
        pwd: value["密码"],
      }).then((res) => {
        if (res.data.errno == 0) {
          //登录成功
          //01.修改登录状态
          this.islogined = true;
          //02.将后端返回的token存储到本地
          localStorage.setItem("token", res.data.data.token);
          //03.将后端返回的用户信息存到本地
          localStorage.setItem(
            "userinfo",
            JSON.stringify(res.data.data.userInfo)
          );
          //04.隐藏模态框
          this.show = false;
          //将用户信息显示在页面中
          this.username = res.data.data.userInfo.username;
        } else {
          //登录失败
        }
      });
    },
    // 点击登录
    login() {
      if (this.islogined) {
        // 当前是登录状态,退出登录
        this.$dialog
          .confirm({
            title: "提示",
            message: "确认要退出吗?",
          })
          .then(() => {
            //点击确认
            // 将本地存储的用户信息清除
            localStorage.removeItem("userinfo");
            localStorage.removeItem("token");
            this.islogined = false;
          })
          .catch(() => {
            //点击取消
          });
      } else {
        // 当未登陆时,显示模态框
        this.username = "";
        this.password = "";
        this.show = true;
      }
    },
  },
  created() {
    //当切换到user页面时 重新触发创建组件实例
    //根据本地的存储的用户信息,判断当前登录状态
    const userinfo = JSON.parse(localStorage.getItem("userinfo"));
    if (userinfo) {
      this.islogined = true;
      this.username = userinfo.username;
    } else {
      // 未登录
    }
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.user {
  .user_top {
    background-color: #333;
    color: #fff;
    padding: 20px 10px;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      margin-right: 10px;
    }
    h3 {
      flex: 1;
    }
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 90%;
    height: 180px;
    background-color: #fff;
    padding: 45px 0 20px 0;
  }
  /deep/.van-overlay {
    z-index: 3;
  }
  /deep/.van-grid-item{
    height: 125px;
  }
}
</style>
